<template>
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="addDialogShow" width="800px" :close-on-click-modal="false" :before-close="dialogHandleCancel">
            <el-form v-if="addDialogShow" class="madp-talk-content" ref="addForm" :model="addForm" label-width="90px" :rules="rules">
                <el-form-item label="分组:" prop="mediumGroupId" key="mediumGroupId">
                    <el-cascader v-model="addForm.mediumGroupId" :options="options" :props="defaultProps" clearable></el-cascader>
                </el-form-item>
                <el-form-item label="标题:" prop="collectionTitle" key="collectionTitle">
                    <el-input maxlength="20" v-model.trim="addForm.collectionTitle" label-width="100%" placeholder="选填，仅内部可见，方便整理和查看"></el-input>
                </el-form-item>
                <el-form-item label="内容:" prop="content" key="content">
                    <el-input type="textarea" placeholder="请输入话术内容" :autosize="{ minRows: 4 }" v-model="addForm.content" maxlength="500" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogHandleCancel">取消</el-button>
                <el-button type="primary" @click="dialogHandleSubmit">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getMediumGroup, materialLibraryList, upload, showImg } from '@/api/customer-into/verbal-manage';
const validateContent = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请输入话术内容'));
    } else if (!value.replaceAll(' ', '')) {
        callback(new Error('话术内容不能为纯空格'));
    } else {
        callback();
    }
};
export default {
    props: {
        form: {
            type: Object,
            default: function() {
                return {
                    mediumGroupId: '',
                    collectionTitle: '',
                    content: ''
                };
            }
        },
        addDialogShow: {
            type: Boolean
        },
        dialogTitle: {
            type: String
        },
        dialogType: {
            type: String
        }
    },
    data() {
        return {
            rules: {
                mediumGroupId: [
                    {
                        required: true,
                        message: '请选择分组',
                        trigger: 'change'
                    }
                ],
                content: [
                    {
                        required: true,
                        validator: validateContent,
                        trigger: 'blur'
                    }
                ]
            },
            // 分组下拉框数据
            options: [],
            // 新增表单
            addForm: {},
            // 下拉框props
            defaultProps: {
                checkStrictly: true,
                value: 'id',
                label: 'name'
            }
        };
    },
    watch: {
        addDialogShow: {
            handler(val) {
                if (val) {
                    this.initForm();
                    this.getMediumGroupList();
                }
            }
        }
    },
    methods: {
        // 初始化表单数据
        initForm() {
            this.addForm = JSON.parse(JSON.stringify(this.form));
        },
        // 弹窗点击取消
        dialogHandleCancel() {
            this.$emit('dialogHandleCancel');
        },
        // 弹窗点击确定
        dialogHandleSubmit() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    this.$emit('dialogHandleSubmit', this.addForm);
                }
            });
        },
        //话术分组列表
        getMediumGroupList() {
            getMediumGroup().then((res) => {
                if (res.data.code != 0) return;
                this.options = res.data.data.slice(1);
            });
        }
    }
};
</script>
